@import "./common/mixin.styl"

html,body
  width 100%
  background rgb(252,252,252)
  overflow-x hidden
  .recharge-wrapper
    padding-top computedNum(52)
    .head-wrapper
      position fixed
      top 0
      left 0
      height computedNum(52)
      font-size 0
      z-index 9
      background rgb(252,252,252)
      .back-wrapper
        width computedNum(49)
        height computedNum(52)
        background url("../img/back-icon.png") no-repeat center center
        background-size computedNum(8.5) computedNum(15)
        vertical-align top
      .title-wrapper
        width computedNum(267)
        height computedNum(52)
        line-height computedNum(52)
        font-family SimHei
        font-size computedNum(16)
        vertical-align top
      .home-wrapper
        width computedNum(59)
        height computedNum(52)
        background url("../img/home-icon.png") no-repeat center center
        background-size computedNum(18.5) computedNum(17.5)
        vertical-align top
    .rest-coin-wrapper
      font-family SimHei
      font-size computedNum(15)
      padding 0 computedNum(20)
      margin-bottom computedNum(20)
      span
        color rgb(243,51,51)
    .recharge-way-wrapper
      font-size 0
      padding 0 computedNum(20)
      margin-top computedNum(20)
      padding-bottom computedNum(20)
      border-1px-bottom(#dddddd)
      .wechat
        vertical-align top
        width computedNum(150)
        height computedNum(35)
        background #dddddd
        border-radius computedNum(3)
        font-size 0
        .way-name
          font-size computedNum(13)
          height computedNum(35)
          line-height computedNum(35)
        .way-icon
          vertical-align top
          width computedNum(21)
          height computedNum(35)
          background url("../img/pay_wechat.png") no-repeat center center
          background-size computedNum(21) auto
          margin-right computedNum(10)
        &.active
          background #ffffff
          border-1px-all(#b1b1b1)
          &:after
            border-radius computedNum(5)
          .selected-icon
            bottom computedNum(-1)
            right computedNum(-1)
            width computedNum(17)
            height computedNum(17)
            background url("../img/subsc.png") no-repeat center center
            background-size computedNum(17) computedNum(17)
      .apply
        width computedNum(150)
        height computedNum(35)
        background #dddddd
        margin-left computedNum(35)
        border-radius computedNum(3)
        font-size 0
        .way-name
          font-size computedNum(13)
          height computedNum(35)
          line-height computedNum(35)
        .way-icon
          vertical-align top
          width computedNum(21)
          height computedNum(35)
          background url("../img/pay_alipay.png") no-repeat center center
          background-size computedNum(21) auto
          margin-right computedNum(8)
        &.active
          background #ffffff
          border-1px-all(#b1b1b1)
          &:after
            border-radius computedNum(5)
          .selected-icon
            bottom computedNum(-1)
            right computedNum(-1)
            width computedNum(17)
            height computedNum(17)
            background url("../img/subsc.png") no-repeat center center
            background-size computedNum(17) computedNum(17)
    .select-tip
      padding computedNum(18) computedNum(20) computedNum(10) computedNum(20)
      font-size computedNum(17)
      color rgb(51,51,51)
    .first-recharge-tip
      width computedNum(312)
      margin-left computedNum(20)
      padding-left computedNum(23)
      height computedNum(18)
      line-height computedNum(20)
      color #fd3b3b
      font-size computedNum(13)
      background url("../img/first-tip-icon.png") no-repeat left center
      background-size computedNum(16) computedNum(18)
    .recharge-type-wrapper
      padding 0 computedNum(20)
      margin-top computedNum(20)
      ul
        font-size 0
        li
          vertical-align top
          width computedNum(157)
          height computedNum(97)
          border-1px-all(#d1d1d1)
          font-size computedNum(14)
          margin-bottom computedNum(15)
          margin-right computedNum(20)
          &.active
            border-1px-all(#ff9600)
          .pay-name
            font-size computedNum(10)
            padding computedNum(10) 0 computedNum(8) 0
            span
              font-size computedNum(15)
              &.month-and-year
                color #f49000
                font-size computedNum(20)
                padding-left computedNum(35)
                padding-top computedNum(2)
                background url("../img/king-icon.png") no-repeat left top
                background-size computedNum(29.5) computedNum(21.5)
          .pay-price
            font-size computedNum(14)
            color rgb(102,102,102)
            margin-bottom computedNum(8)
          .pay-desc
            font-size computedNum(13)
            color #ef5757
          .logo-icon
            right 0
            top 0
            z-index 2
            &.limit
              width computedNum(55)
              height computedNum(55)
              background url("../img/limit.png") no-repeat center top
              background-size computedNum(55) auto
            &.bought
              right computedNum(-2)
              width computedNum(55)
              height computedNum(55)
              background url("../img/bought.png") no-repeat center top
              background-size computedNum(55) auto
            &.summer
              top computedNum(-14)
              right computedNum(-10)
              width computedNum(35)
              height computedNum(60)
              background url("../img/summer.png") no-repeat center top
              background-size computedNum(35) auto
            &.recommend
              width computedNum(20)
              height computedNum(45)
              background url("../img/recommend.png") no-repeat right top
              background-size computedNum(20) auto
          &:after
            border-radius computedNum(5)
          &:nth-child(2n)
            margin-right 0
          &.odd
            margin-right computedNum(20)
            &:nth-child(2n-1)
              margin-right 0
        .odd-first
          width computedNum(335)
    .check-agree-wrapper
      width computedNum(180)
      margin-top computedNum(31)
      margin-left computedNum(97.5)
      font-size 0
      padding-bottom computedNum(80)
      .check-box
        width computedNum(15)
        height computedNum(15)
        margin-right computedNum(10)
        vertical-align top
        background url("../img/checkbox.png") no-repeat center top
        background-size computedNum(15) computedNum(15)
        &.selected
          background url("../img/selected-icon.png") no-repeat center top
          background-size computedNum(15) computedNum(15)
      .agree-text
        font-size computedNum(13)
        color #999999
        margin-right computedNum(5)
        vertical-align top
        top computedNum(-1)
      .explain-btn
        font-size computedNum(13)
        color rgb(244,144,0)
        text-decoration underline
        vertical-align top
        top computedNum(-1)
    .recharge-btn-wrapper
      position fixed
      bottom 0
      left 0
      width 100%
      background #626262
      height computedNum(50)
      z-index 9
      font-size 0
      color #ffffff
      .recharge-num
        padding-left computedNum(20)
        width computedNum(243)
        height computedNum(50)
        line-height computedNum(50)
        vertical-align top
        font-size computedNum(20)
      .recharge-btn
        width computedNum(112)
        height computedNum(50)
        line-height computedNum(50)
        background #fd6975
        font-size computedNum(16)
    .explain-mask
      position fixed
      width 100%
      height 100%
      top 0
      left 0
      background rgba(0,0,0,0.6)
      z-index 10
      display none
      .explain-content
        width computedNum(312)
        height computedNum(385)
        background #ffffff
        border-radius computedNum(3)
        margin-top computedNum(90)
        margin-left computedNum(31.5)
        .title-wrapper
          font-size computedNum(17)
          font-family SimHei
          height computedNum(60)
          line-height computedNum(60)
          .close-icon
            right 0
            top 0
            width computedNum(46)
            height computedNum(60)
            background url("../img/close-gray.png") no-repeat center center
            background-size computedNum(14) computedNum(14)
        .explain-detail
          padding 0 computedNum(16)
          height computedNum(286)
          overflow-y auto
          .explain-item
            font-size 0
            .order
              font-size computedNum(14)
              width computedNum(20)
              font-family SimHei
              margin-top computedNum(2)
            .explain-item-desc
              vertical-align top
              font-size computedNum(14)
              width computedNum(260)
              color #666666
              font-family SimHei
              line-height computedNum(20)
              .red
                color rgb(241,74,74)


